<template>
  <view class="content">
    <view class="top">
      <view class="">
        <img
          style="width: 150rpx; height: 150rpx"
          src="http://smzacc0p8.hn-bkt.clouddn.com/home_7.png"
          alt=""
        />
      </view>
      <view class="name">
        <view class="" style="font-size: 40rpx; font-weight: 900">{{
          userinfo.username
        }}</view>
        <view class="" style="margin-top: 20rpx">{{ userinfo.studentId }}</view>
      </view>
    </view>
    <view class="center">
      <!-- <view class="info" @tap="clickInfoPhone">
        <view class="" style="flex: 12">
          <view class="" style="font-size: 35rpx; color: black">电话号码</view>
          <view class="" style="color: #959492">{{
            userinfo.phone == null ? "无" : userinfo.phone
          }}</view>
        </view>
        <view class="" style="flex: 1">
          <img
            style="width: 40rpx; height: 40rpx; margin-top: 10rpx"
            src="../../static/info_1.png"
            alt=""
          />
        </view>
      </view> -->
      <view class="info" @tap="clickInfoEmail">
        <view class="" style="flex: 12">
          <view class="" style="font-size: 35rpx; color: black">邮箱</view>
          <view class="" style="color: #959492">{{ userinfo.email }}</view>
        </view>
        <view class="" style="flex: 1">
          <img
            style="width: 40rpx; height: 40rpx; margin-top: 10rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/info_1.png"
            alt=""
          />
        </view>
      </view>
      <view class="info" @tap="clickInfoPassword">
        <view class="" style="flex: 12">
          <view class="" style="font-size: 35rpx; color: black">密码</view>
          <view class="" style="color: #959492">*********</view>
        </view>
        <view class="" style="flex: 1">
          <img
            style="width: 40rpx; height: 40rpx; margin-top: 10rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/info_1.png"
            alt=""
          />
        </view>
      </view>
      <view
        @tap="wxBinding"
        class="info"
        style="justify-content: space-between"
        v-if="userinfo.openId == null"
      >
        <view class="">
          <img
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/wx.png"
            alt=""
          />
        </view>
        <view class="" style="font-size: 30rpx; color: #959492"
          >绑定微信可通过微信快速登录</view
        >
        <view class="conbin">绑定</view>
      </view>
      <view
        v-else
        @tap="wxunBinding"
        class="info"
        style="justify-content: space-between"
      >
        <view class="">
          <img
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/wx.png"
            alt=""
          />
        </view>
        <view class="" style="font-size: 30rpx; color: #959492"
          >绑定微信可通过微信快速登录</view
        >
        <view class="conbin">解绑</view>
      </view>
    </view>
    <view class="btn">
      <button type="warn" @tap="Logout">退出登录</button>
    </view>
  </view>
  <!-- 修改弹出框 -->
  <uni-popup ref="infoPhone" type="dialog">
    <uni-popup-dialog
      ref="inputClose"
      mode="input"
      title="输入修改电话号码"
      placeholder="请输入电话号码"
      @confirm="ConfirmPhone"
    ></uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="infoEmail" type="dialog">
    <uni-popup-dialog
      ref="inputClose"
      mode="input"
      title="输入修改邮箱"
      @confirm="ConfirmEmail"
    >
      <view>
        <uni-forms>
          <uni-forms-item>
            <view class="input_item">
              <input
                v-model="EmailData.email"
                placeholder="请输入邮箱"
                placeholder-class="input-placeholder"
              />
            </view>
          </uni-forms-item>
          <uni-forms-item>
            <view class="" style="display: flex">
              <view class="input_item">
                <input
                  v-model="EmailData.code"
                  placeholder="请输入验证码"
                  placeholder-class="input-placeholder"
                />
              </view>
              <view v-if="Wait" @tap="getCodeE" class="getCode"
                >获取验证码</view
              >
              <view v-else @tap="getCodeE" class="getCode">{{ second }}s</view>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="infoPassword" type="dialog">
    <uni-popup-dialog
      ref="inputClose"
      mode="input"
      title="输入修改密码"
      @confirm="ConfirmPassWord"
    >
      <view class="">
        <uni-forms ref="baseForm" :modelValue="passWordData">
          <uni-forms-item>
            <uni-easyinput
              v-model="passWordData.oldPassWord"
              placeholder="请输入旧密码"
            />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput
              v-model="passWordData.newpassWord"
              placeholder="请输入新密码"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getUserInfo } from "../../utils/index";
import {
  revisePhone,
  alterPassWord,
  WXBinding,
  unBinding,
  AlterEmail,
} from "../../utils/myInfo";
import { sendCode } from "../../utils/general";
import { InfoStore } from "../../store/index";
const second = ref(60);
const Wait = ref(true);
const userinfo = ref([]);
const infoPhone = ref();
const infoEmail = ref();
const infoPassword = ref();
const passWordData = ref({
  oldPassWord: "",
  newpassWord: "",
});
const EmailData = ref({
  email: "",
  code: "",
});
const useInfoStore = InfoStore();
// 确认修改邮箱
const ConfirmEmail = async () => {
  if (!EmailData.value.email || !EmailData.value.code) {
    return uni.showToast({
      title: "请完善信息",
      icon: "none",
    });
  } else {
    const res = await AlterEmail(EmailData.value);
    if (res.data.code == 200) {
      uni.showToast({
        title: "更改成功",
      });
    } else {
      uni.showToast({
        title: "更改失败",
      });
    }
  }
};
//点击微信绑定
const wxBinding = () => {
  uni.showModal({
    title: "提示",
    content: "是否绑定当前微信",
    success: function (res) {
      if (res.confirm) {
        getcode();
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
const wxunBinding = () => {
  uni.showModal({
    title: "提示",
    content: "是否解绑当前微信",
    success: async function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: "正在解绑定...",
          mask: true, // 是否显示透明蒙层，防止触摸穿透
        });
        const res = await unBinding();
        if (res?.data?.code == 200) {
          getMyInfo();
          uni.showToast({
            title: "解绑成功",
            icon: "success",
          });
        } else {
          uni.showToast({
            title: res?.data?.message,
            icon: "error",
          });
        }
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
// 获取邮箱
const getCodeE = async () => {
  if (!EmailData.value.email) {
    return uni.showToast({
      title: "请输入邮箱",
      icon: "none",
    });
  } else {
    const res = await sendCode(EmailData.value.email);
    if (res?.data?.code == 200) {
      showTime();
    }
  }
};
//倒计时
const showTime = async () => {
  Wait.value = false;
  const time = setInterval(() => {
    second.value--;
    if (second.value == 0) {
      second.value = 60;
      Wait.value = true;
      clearInterval(time);
    }
  }, 1000);
};
const getcode = () => {
  //获取code
  uni.showLoading({
    title: "正在绑定...",
    mask: true, // 是否显示透明蒙层，防止触摸穿透
  });
  uni.login({
    provider: "weixin",
    success: async (res) => {
      // 登录成功
      const Res = await WXBinding(res.code);
      if (Res?.data?.code == 200) {
        uni.showToast({
          title: "绑定成功",
        });
        getMyInfo();
      }
    },
  });
};
onLoad(() => {
  getMyInfo();
});
// 获取信息
const getMyInfo = async () => {
  const res = await getUserInfo();
  if (res.data.code == 200) {
    userinfo.value = res.data.data;
    useInfoStore.setProfile(res?.data?.data);
  }
};
const clickInfoPhone = () => {
  infoPhone.value.open("center");
};
const ConfirmPhone = async (val) => {
  if (val != "") {
    const res = await revisePhone(val);
    if (res.data.code == 200) {
      uni.showToast({
        title: "修改成功",
      });
      getMyInfo();
    } else {
      uni.showToast({
        title: "修改失败",
      });
    }
  } else {
    uni.showToast({
      title: "修改取消",
    });
  }
};
const clickInfoEmail = () => {
  (EmailData.value.code = ""),
    (EmailData.value.email = ""),
    infoEmail.value.open("center");
};
const clickInfoPassword = () => {
  passWordData.value.oldPassWord = "";
  passWordData.value.newpassWord = "";
  infoPassword.value.open("center");
};
const ConfirmPassWord = async () => {
  if (
    passWordData.value.oldPassWord == "" ||
    passWordData.value.newpassWord == ""
  ) {
    uni.showToast({
      title: "修改取消",
    });
  } else {
    const res = await alterPassWord(passWordData.value);
    if (res.data.code == 200) {
      uni.showToast({
        title: res.data.message,
      });
    } else {
      uni.showToast({
        title: res.data.message,
      });
    }
  }
};
const Logout = () => {
  uni.showModal({
    title: "提示",
    content: "是否退出登录",
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: "正在退出...",
          mask: true, // 是否显示透明蒙层，防止触摸穿透
        });
        uni.removeStorageSync("Token");
        useInfoStore.clearProfile();
        uni.reLaunch({
          url: "/pageA/login/login",
        });
      }
    },
  });
};
</script>

<style lang="scss">
page {
  height: 100%;
  background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}

.top {
  display: flex;
  padding: 50rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #c4c4c4;

  .name {
    margin-top: 15rpx;
    margin-left: 50rpx;
    font-size: 30rpx;
    font-weight: bold;
  }
}

.center {
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 30rpx;

  .info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    border-top: 1rpx solid #c4c4c4;

    .conbin {
      padding: 10rpx 20rpx 10rpx 20rpx;
      background-color: #e99d42;
      font-size: 25rpx;
      color: #fff;
      font-weight: 900;
      border-radius: 10rpx;
    }
  }
}

.btn {
  margin-top: 20rpx;
  padding: 50rpx;
  border-radius: 50rpx;
}

.input_item {
  height: 70rpx;
  border-bottom: #ccc 2rpx solid;

  .input-placeholder {
    color: #ccc;
    font-size: 28rpx;
  }

  input {
    height: 100%;
    font-size: 32rpx;
  }
}

.getCode {
  background-color: #b8d587;
  text-align: center;
  height: 70rpx;
  width: 160rpx;
  line-height: 70rpx;
  color: #fff;
  font-weight: bold;
  border-radius: 10rpx;
}
</style>